<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>精灵</title>
</head>
<body>
    <canvas id="canvas" width="250" height="300">
        不支持 canvas
    </canvas>
    <br/>
    帧数:<input type="text" id="fps" value="10"/>
    <br/>
    速度:<input type="text" id="speed" value="5"/>
    <br/>
    比例:<input type="text" id="ratio" value="2"/>
    <br/>

    <input type="button" value="开始" onclick="animate()"/>
    <input type="button" value="停止" onclick="stop()"/>

    <script type="text/javascript">
        var interval = null;

        function stop()
        {
            clearInterval(interval);
        };

        var frames = [];
        frames[0] = [0,4,19,19];
        frames[1] = [22,1,24,19];
        frames[2] = [49,0,18,17];
        frames[3] = [1,32,18,17];
        frames[4] = [22,33,24,19];
        frames[5] = [49,36,19,19];

        function Sprite(dx,dy,speed,fps)
        {
            this.dx = dx;
            this.dy = dy;
            this.fps = fps;
            this.delay = 1000/fps;

            this.last_update = 0;

            this.speed = -speed;

            this.index = 0;

            this.dir_left = true;
        }

         Sprite.prototype.update = function(canvas)
         {
             var nowTime = (new Date()).getTime();
             if(nowTime - this.last_update > this.delay)
             {
                 if(this.dir_left)
                 {
                     if(this.index > 2)
                        this.index = 0;
                 }
                 else
                 {
                     if(this.index > 5)
                        this.index = 3;
                 }

                 this.frame = frames[this.index];

                 this.sx = this.frame[0];
                 this.sy = this.frame[1];
                 this.sw = this.frame[2];
                 this.sh = this.frame[3];
                //移动 改变x坐标
                 this.dx = this.dx + this.speed;

                 if(this.dx < 0)
                 {
                     this.dx = 0;
                     this.dir_left = false;
                     this.speed = - this.speed;
                     this.index = 3;
                 }
                 if(this.dx + this.sw > canvas.getAttribute("width"))
                 {
                     this.dx = canvas.getAttribute("width") - this.sw;
                     this.dir_left = true;
                     this.speed = -this.speed;
                     this.index = 0;
                 }
                 this.dy = this.dy;

                 this.index ++;
                 this.last_update = nowTime;
             }
         }

        function animate()
        {
            stop();
            var speed = parseInt(document.getElementById('speed').value);
            var fps = parseInt(document.getElementById('fps').value);
            var ratio = parseInt(document.getElementById('ratio').value);

            var canvas = document.getElementById('canvas');
            var context = canvas.getContext("2d");

            var canvasWidth = canvas.getAttribute("width");
            var canvasHeight = canvas.getAttribute("height");

            context.clearRect(0,0,canvasWidth,canvasHeight);

            var img = new Image();
            img.src = "./picture/sprite.gif";

            var sprite = new Sprite(120,150,speed,fps);

            interval = setInterval(function()
            {
                context.clearRect(0,0,canvasWidth,canvasHeight);
                sprite.update(canvas);
                context.save();
                context.translate(sprite.dx,sprite.dy);
                context.scale(ratio,ratio);
                context.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.sw,sprite.sh);
                context.restore();
            },1);
        }
    </script>

</body>
</html>